This article will help you to understand about how to use bootstarp in React js and how to use react table in your react js application. These days in every application we need to display list of records and for the list we need searching, sorting, filtering, pagination and export option. And if we apply custom searching, sorting, filtering, pagination, export in react js application then we have to write a lot of code and logic which could be complicated and very hard to maintain in future. So to over come these problems and issues we have react table or react datatable which is very easy to implement and does all the magic to achieve the desired output. So in this article I am explaining all the code from scratch to use react table in react js. I have also added a video link in this article for your reference so that you could watch all the steps and implement the react table in your project.
import React, { useState, useEffect } from ‘react’;
import BootstrapTable from ‘react-bootstrap-table-next’;
import ‘bootstrap/dist/css/bootstrap.min.css’;
import ‘react-bootstrap-table-next/dist/react-bootstrap-table2.css’;
import paginationFactory from ‘react-bootstrap-table2-paginator’;
import ‘react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css’;
import filterFactory, { textFilter } from ‘react-bootstrap-table2-filter’;
import ‘react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.css’;
import ToolkitProvider, { CSVExport } from ‘react-bootstrap-table2-toolkit’;
function DataList() {
const [userList, setUserList] = useState([]);
const { ExportCSVButton } = CSVExport;
const MyExportCSV = (props) => {
const handleClick = () => {
props.onExport();
};
return (
<div>
<button className=”btn btn-success” onClick={handleClick}>Export to CSV</button>
</div>
);
};
const columns = [
{ dataField: ‘id’, text: ‘Id’ },
{ dataField: ‘name’, text: ‘Name’, sort: true, filter: textFilter() },
{ dataField: ‘username’, text: ‘Username’, sort: true, filter: textFilter() },
{ dataField: ’email’, text: ‘Email’, sort: true }
]
const pagination = paginationFactory({
page: 2,
sizePerPage: 5,
lastPageText: ‘>>’,
firstPageText: ‘<<‘,
nextPageText: ‘>’,
prePageText: ‘<‘,
showTotal: true,
alwaysShowAllBtns: true,
onPageChange: function (page, sizePerPage) {
console.log(‘page’, page);
console.log(‘sizePerPage’, sizePerPage);
},
onSizePerPageChange: function (page, sizePerPage) {
console.log(‘page’, page);
console.log(‘sizePerPage’, sizePerPage);
}
});
useEffect(() => {
fetch(‘https://jsonplaceholder.typicode.com/users’)
.then(response => response.json())
.then(result => setUserList(result))
.catch(error => console.log(error));
}, [])
return <div>
<ToolkitProvider
bootstrap4
keyField=’id’
data={userList}
columns={columns}
exportCSV
>
{
props => (
<React.Fragment>
<MyExportCSV {…props.csvProps} />
<BootstrapTable
// bootstrap4
// keyField=’id’
// columns={columns}
// data={userList}
pagination={pagination}
filter={filterFactory()}
{…props.baseProps}
/>
</React.Fragment>
)
}
</ToolkitProvider>
{/* <table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
<th>Email</th>
</tr>
{
userList && userList.length> 0 ?
userList.map(usr =>
<tr>
<td>{usr.id}</td>
<td>{usr.name}</td>
<td>{usr.username}</td>
<td>{usr.email}</td>
</tr>
)
:’Loading’
}
</table> */}
</div>
}
export default DataList;
